<script setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import * as echarts from 'echarts';
import router from "@/router/index.js";

const time = ref('')
let timeInterval = null;
// 退出登录
const loginOut = () => {
  ElMessage.success('成功退出登录')
  router.push("/login");
}
onMounted(() => {
  // 初始化时间
  time.value = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
  
  // 设置定时器，每秒更新时间
  timeInterval = setInterval(() => {
    time.value = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
  }, 1000);

  // 学校心理情况图
  var chart1Box = document.getElementById('mt3-box');
  var chart1 = echarts.init(chart1Box);
  var option1;
  // 学校各部门测评情况图
  var chart2Box = document.getElementById('mt4-box');
  var chart2 = echarts.init(chart2Box);
  var option2;
  // 用户端功能使用情况图
  var chart3Box = document.getElementById('mt5-box');
  var chart3 = echarts.init(chart3Box);
  var option3;
  // 学校心理问题情况图
  var chart4Box = document.getElementById('mt6-box');
  var chart4 = echarts.init(chart4Box);
  var option4;

  // 学校心理情况图相关配置
  option1 = {
    tooltip: {
      trigger: 'item'
    },
    color: ['#ffa40c', '#ffdc1a', '#53e09e', '#5956f4'],
    series: [
      {
        name: '健康状况',
        type: 'pie',
        radius: ['50%', '70%'],
        // 开启自动避让
        avoidLabelOverlap: true,
        center: ['50%', '50%'],
        itemStyle: {
          borderRadius: 6,
        },
        label: {
          show: true,
          position: 'outside',           // 标签在外部
          formatter: '{b}\n{d}%',        // 显示名称 + 换行 + 百分比
          // formatter: '{b}: {d}%',     // 也可以写在同一行
          color: '#9ecbe7',
          fontSize: 10
        },
        labelLine: {
          show: true,                    // 显示引导线
          smooth: true                  // 可选：true 表示曲线
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 10,
            fontWeight: 'bold'
          }
        },
        data: [
          {value: 100, name: '危机'},
          {value: 300, name: '预警'},
          {value: 600, name: '一般'},
          {value: 2000, name: '健康'}
        ]
      }
    ]
  };
  // 学校各部门测评情况图配置
  option2 = {
    color: ['#ffe800', '#0052ff', '#00ffff'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '10px',           // 左侧留适当空间给 y 轴标签
      top: '6px',
      bottom: '40px',
      containLabel: true      // 推荐：确保所有标签都被包含在内，自动调整
    },
    legend: {
      // orient: 'vertical',     // 垂直排列（推荐用于右侧）
      itemGap: 10,
      bottom: 10,
      // 可选：修改图例文字颜色
      textStyle: {
        color: '#4ac6ea' // 图例文字颜色
      }
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: false  // 🔥 关闭竖直方向的网格线
      },
      axisLabel: {
        color: '#4ac6ea'
      }
    },
    yAxis: {
      type: 'category',
      data: ['A学院', 'B学院', 'C学院', 'D学院', '部门'],
      axisLabel: {
        color: '#4ac6ea'
      }
    },
    barCategoryGap: '50%',
    series: [
      {
        name: '预警人数',
        type: 'bar',
        data: [15, 14, 21, 54, 43],
        barWidth: '30%',
        label: {
          show: true,           // 显示标签（即数值）
          position: 'right', // 可选：'top', 'insideTop', 'right' 等
          color: '#4ac6ea',         // 字体颜色
          fontSize: 12
        },
      },
      {
        name: '总人数',
        type: 'bar',
        data: [340, 320, 524, 630, 654],
        barWidth: '30%',

        label: {
          show: true,           // 显示标签（即数值）
          position: 'right', // 可选：'top', 'insideTop', 'right' 等
          color: '#4ac6ea',         // 字体颜色
          fontSize: 12
        },
      },
      {
        name: '参与人数',
        type: 'bar',
        data: [324, 279, 434, 602, 545],
        barWidth: '30%',

        label: {
          show: true,           // 显示标签（即数值）
          position: 'right', // 可选：'top', 'insideTop', 'right' 等
          color: '#4ac6ea',         // 字体颜色
          fontSize: 12
        },
      }
    ],
    barGap: '5%'
  }
  // 用户端功能使用情况图配置
  option3 = {
    tooltip: { show: false },
    legend: {
      orient: 'vertical', // 可以选择 'horizontal' 改为横向布局
      itemGap: 15,
      right: 5,
      top: 20,
      data: ['测评', '趣味游戏', '心理练习', '呼吸训练', '心情打卡', '社群互助'],
      textStyle: {
        color: '#4ac6ea', // 将标签颜色修改为蓝色
        fontSize: 12
      }
    },
    // 添加color数组来设置legend小方格的颜色
    color: ['#1E88E5', '#4CAF50', '#FFC107', '#FF9800', '#F44336', '#9C27B0'],
    series: [
      // 测评
      {
        name: '测评',
        type: 'pie',
        radius: ['72%', '80%'],
        center: ['40%', '50%'],
        startAngle: 90,
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: 'transparent',
          borderWidth: 0
        },
        label: { show: false }, // 关闭标签显示
        labelLine: { show: false }, // 关闭引导线显示
        data: [
          { value: 70, itemStyle: { color: '#1E88E5' } },
          { value: 30, itemStyle: { color: 'transparent' } }
        ]
      },
      // 趣味游戏
      {
        name: '趣味游戏',
        type: 'pie',
        radius: ['63%', '71%'],
        center: ['40%', '50%'],
        startAngle: 90,
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: 'transparent',
          borderWidth: 0
        },
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 60, itemStyle: { color: '#4CAF50' } },
          { value: 40, itemStyle: { color: 'transparent' } }
        ]
      },
      // 心理练习
      {
        name: '心理练习',
        type: 'pie',
        radius: ['54%', '62%'],
        center: ['40%', '50%'],
        startAngle: 90,
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: 'transparent',
          borderWidth: 0
        },
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 80, itemStyle: { color: '#FFC107' } },
          { value: 20, itemStyle: { color: 'transparent' } }
        ]
      },
      // 呼吸训练
      {
        name: '呼吸训练',
        type: 'pie',
        radius: ['45%', '53%'],
        center: ['40%', '50%'],
        startAngle: 90,
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: 'transparent',
          borderWidth: 0
        },
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 50, itemStyle: { color: '#FF9800' } },
          { value: 50, itemStyle: { color: 'transparent' } }
        ]
      },
      // 心情打卡
      {
        name: '心情打卡',
        type: 'pie',
        radius: ['36%', '44%'],
        center: ['40%', '50%'],
        startAngle: 90,
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: 'transparent',
          borderWidth: 0
        },
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 75, itemStyle: { color: '#F44336' } },
          { value: 25, itemStyle: { color: 'transparent' } }
        ]
      },
      // 社群互助
      {
        name: '社群互助',
        type: 'pie',
        radius: ['27%', '35%'],
        center: ['40%', '50%'],
        startAngle: 90,
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: 'transparent',
          borderWidth: 0
        },
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 65, itemStyle: { color: '#9C27B0' } },
          { value: 35, itemStyle: { color: 'transparent' } }
        ]
      }
    ]
  };
  // 学校心理问题情况图配置
  option4 = {
    tooltip: {
      trigger: 'item'
    },
    color: ['#5aaef3', '#cc45f4', '#946fec', '#5b98e3', '#23c2db'],
    series: [
      {
        name: '健康状况',
        type: 'pie',
        radius: ['50%', '70%'],
        // 开启自动避让
        avoidLabelOverlap: true,
        center: ['50%', '50%'],
        itemStyle: {
          borderRadius: 6,
        },
        label: {
          show: true,
          position: 'outside',           // 标签在外部
          formatter: '{b}\n{d}%',        // 显示名称 + 换行 + 百分比
          // formatter: '{b}: {d}%',     // 也可以写在同一行
          color: '#9ecbe7',
          fontSize: 10
        },
        labelLine: {
          show: true,                    // 显示引导线
          smooth: true                  // 可选：true 表示曲线
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 10,
            fontWeight: 'bold'
          }
        },
        data: [
          {value: 10, name: '适应'},
          {value: 5, name: '人际关系'},
          {value: 80, name: '学校压力'},
          {value: 20, name: '抑郁'},
          {value: 180, name: '焦虑'},
        ]
      }
    ]
  }

  // 设置图形配置
  option1 && chart1.setOption(option1);
  option2 && chart2.setOption(option2);
  option3 && chart3.setOption(option3);
  option4 && chart4.setOption(option4);

  // 监听窗口 resize 事件
  const handleResize = () => {
    chart1?.resize();
    chart2?.resize();
    chart3?.resize();
    chart4?.resize();
  };

  // 添加窗口变化的监听事件
  window.addEventListener('resize', handleResize);

  // 组件卸载前移除监听，防止内存泄漏
  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
    // 销毁图表实例
    chart1?.dispose();
    chart2?.dispose();
    chart3?.dispose();
    chart4?.dispose();
    // 清除定时器
    if (timeInterval) {
      clearInterval(timeInterval);
      timeInterval = null;
    }
  });
})
</script>

<template>
<div class="bg">
  <!-- 上部 -->
  <div class="top">
    <div class="top-mid">河南工业和信息化职业学院心理服务平台</div>
    <div class="top-right">
      <div style="color: #3593c9;font-size: 18px;text-align: right">{{ time }}</div>
      <div style="color: white;font-size: 14px;display: flex;align-items: center"><img src="@/assets/images/DataBoard/人物.png" alt="" width="40px">河南工业和信息化职业学院&nbsp;&nbsp;
        <router-link to="" @click="loginOut()">退出登录</router-link>
      </div>
    </div>
  </div>

  <!-- 中部 -->
  <div class="w mid">
    <div class="mid-item">
      <div class="item-t-bet">测评计划</div>
      <div class="mt1-box">
        <div style="padding: 3px 0; color: white;text-align: center">正在进行的测评计划</div>
        <div class="mt1-item">
          <img src="@/assets/images/DataBoard/评测计划书写图.png" alt="" width="40px" />
          <div class="mt1-item-mid">大学心理健康普查</div>
          <sapn style="font-size: 26px;color: white">75%</sapn>
        </div>
        <div class="mt1-item">
          <img src="@/assets/images/DataBoard/评测计划书写图.png" alt="" width="40px" />
          <div class="mt1-item-mid">大学心理健康普查</div>
          <sapn style="font-size: 26px;color: white">75%</sapn>
        </div>
        <div class="mt1-item">
          <img src="@/assets/images/DataBoard/评测计划书写图.png" alt="" width="40px" />
          <div class="mt1-item-mid">查看更多</div>
        </div>
      </div>
    </div>
    <div class="mid-item">
      <div class="item-t-mid">数据概览</div>
      <div class="mt2-box">
        <div class="mt2-item">
          <img src="@/assets/images/DataBoard/数据概览图1.png" alt="" height="50%">
          <div class="mt2-item-r">
            累计评测人数
            <span style="font-size: 30px;font-weight: 600">10000人</span>
          </div>
        </div>
        <div class="mt2-item">
          <img src="@/assets/images/DataBoard/数据概览图2.png" alt="" height="50%">
          <div class="mt2-item-r">
            累计干预人数
            <span style="font-size: 30px;font-weight: 600">500人</span>
          </div>
        </div>
        <div class="mt2-item">
          <img src="@/assets/images/DataBoard/数据概览图3.png" alt="" height="50%">
          <div class="mt2-item-r">
            累计预警人数
            <span style="font-size: 30px;font-weight: 600">500人</span>
          </div>
        </div>
        <div class="mt2-item">
          <img src="@/assets/images/DataBoard/数据概览图4.png" alt="" height="50%">
          <div class="mt2-item-r">
            累计建档人数
            <span style="font-size: 30px;font-weight: 600">30000人</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mid-item">
      <div class="item-t-bet">学校心理情况</div>
      <div id="mt3-box"></div>
    </div>
  </div>

  <!-- 下部 -->
  <div class="w bottom">
    <div class="bottom-item">
      <div class="item-t-bet">学校各部门评测情况</div>
      <div id="mt4-box"></div>
    </div>
    <div class="bottom-item">
      <div class="item-t-mid">用户功能使用情况</div>
      <div id="mt5-box"></div>
    </div>
    <div class="bottom-item">
      <div class="item-t-bet">学校心理问题情况</div>
      <div class="mt6-box-arround">
        <div id="mt6-box"></div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped>
.bg {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/DataBoard/数据大屏背景图片.png') center center / 100% 100% no-repeat;
}
.top {
  position: relative;
}
.top-mid {
  padding-top: 3px;
  margin: 0 auto;
  width: 1000px;
  height: 68px;
  background: url('@/assets/images/DataBoard/标题背景.png') center center / 100% 100% no-repeat;
  font-size: 26px;
  text-align: center;
  color: #85a5dd;
}
.top-right {
  position: absolute;
  top: 0;
  right: 20px;
}
.top-right a {
  color: #25afdd;
}
.top-right a:hover {
  color: red;
}
.w {
  width: 1400px;
  margin: 0 auto;
}
.mid {
  display: flex;
  justify-content: space-between;
}
.mid-item {
  width: 410px;
  height: 270px;
}
.mt1-box {
  margin-top: 5px;
  height: 220px;
  background: url('@/assets/images/DataBoard/mt1-bg.png') center center / 100% 100% no-repeat;
}
.mt1-item {
  padding: 0 30px;
  display: flex;
  justify-content: left;
  align-items: center;
  margin-top: 10px;
  height: 50px;
}
.mt1-item-mid {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 16px;
  margin-right: 20px;
  width: 210px;height: 100%;
  background: url('@/assets/images/DataBoard/评测计划bg2.png') center center / 100% 100% no-repeat;
  font-size: 20px;
  font-weight: 600;
  color: #58ecfd;
}
.mt2-box {
  padding: 0 14px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.mt2-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 18px;
  width: 180px;
  height: 80px;
}
.mt2-item-r {
  width: 120px;
  height: 80%;
  color: white;
}
#mt3-box {
  margin-top: 8px;
  height: 216px;
  background: url('@/assets/images/DataBoard/mt1-bg.png') center center / 100% 100% no-repeat;
}
#mt4-box {
  margin-top: 8px;
  height: 320px;
  background: url('@/assets/images/DataBoard/mt1-bg.png') center center / 100% 100% no-repeat;
}
#mt5-box {
  margin-top: 8px;
  height: 320px;
  background: url('@/assets/images/DataBoard/mt1-bg.png') center center / 100% 100% no-repeat;
}
.mt6-box-arround {
  padding-top: 50px;
  margin-top: 8px;
  height: 320px;
  background: url('@/assets/images/DataBoard/mt1-bg.png') center center / 100% 100% no-repeat;
}
#mt6-box {
  margin-top: 8px;
  height: 216px;
}
.bottom {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}
.bottom-item {
  width: 410px;
  height: 370px;
}
.item-t-bet {
  display: flex;
  align-items: center;
  background-color: blue;
  height: 40px;
  padding-left: 28px;
  color: white;
  background: url('@/assets/images/DataBoard/item-t-left.png') center left / contain no-repeat;
}
.item-t-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blue;
  height: 40px;
  color: white;
  background: url('@/assets/images/DataBoard/item-t-mid.png') center center / contain no-repeat;
}
</style>